<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }
</style>

<body style="background-color: blue;">
    <div class="stage">
        <!-- <div class="track-pad"></div> -->
        <canvas class="track-monitor"></canvas>
        <!-- <div class="track-coordinate-list"></div> -->
    </div>


    <script>
        // load
        // 当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。
        // 它与DOMContentLoaded不同，后者只要页面DOM加载完成就触发，无需等待依赖资源的加载。
        // var pad = document.getElementsByClassName('track-pad')[0];
        var monitor = document.getElementsByClassName('track-monitor')[0];
        console.log(monitor)
        line_xy = []
        var context = monitor.getContext('2d');
        var cset = [];
        let a = 0;
        let is_a = true;
        mouseDownSign = "down";

        var fixSize = function () {
            monitor.width = window.innerWidth;
            monitor.height = window.innerWidth;
        };
        fixSize()

        monitor.addEventListener("touchstart", function (event) {
            context.beginPath();
            draw(mouseDownSign, event);
        });
        monitor.addEventListener("touchmove", function (event) {
            draw("move", event);
        })
        monitor.addEventListener("touchend", function (event) {
            draw("up", event);
        });

        //画轨迹
		function draw(eventSign, event) {
			if (eventSign == mouseDownSign) {
				context.moveTo(event.changedTouches[0].pageX, event.changedTouches[0].pageY)
			} else {
				context.lineTo(event.changedTouches[0].pageX, event.changedTouches[0].pageY)
				context.stroke();
			}
		}

    
    </script>
</body>

</html>